<template>
  <div id="chart9" style="width: 100%;height:100%;"></div>
</template>

<script>
export default {
  name: "echart9",
  data() {
    return {}
  },
  mounted() {
    this.initEcharts1()
  },
  methods: {
    initEcharts1() {
      var myChart = this.$echarts.init(document.getElementById('chart9'));
      // 指定图表的配置项和数据
      var option = {
        grid: {
          left: -10,
          width: "80%"
        },
        legend: {
          textStyle: {//图例文字的样式
            color: '#fff',
          },
          left: "85%",
          top: "28%",
          align: "right",
          data: ['沙石','水泥','钢材','玻璃']
        },
        xAxis: [
          {
            type: 'category',
            data: ['沙石','水泥','钢材','玻璃'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#fff'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '沙石',
            type: 'bar',
            barGap: '-100%',
            //设置柱状图大小
            barWidth: 20,
            data: [5, 0, 0, 0],
            itemStyle: {        //上方显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            }
          },
          {
            name: '水泥',
            type: 'bar',
            barGap: '-100%',
            //设置柱状图大小
            barWidth: 20,
            data: [0, 2, 0, 0],
            itemStyle: {        //上方显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            }
          },
          {
            name: '钢材',
            type: 'bar',
            barGap: '-100%',
            //设置柱状图大小
            barWidth: 20,
            data: [0, 0, 3, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {        //上方显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            }
          },
          {
            name: '玻璃',
            type: 'bar',
            barGap: '-100%',
            //设置柱状图大小
            barWidth: 20,
            data: [0, 0, 0, 4],
            itemStyle: {        //上方显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            }
          },
        ],
        label: {
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'black'
            }
          }
        }
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>
